import React, { Component } from 'react';
import '../../styles/Cate.scss'
import { SearchOutline } from 'antd-mobile-icons'
import { Tabs } from 'antd-mobile'
import * as service from '../../api/index'
import AllShow from '../../components/AllShow'

class Cate extends Component {
    state = {
        catenav: []
    }
    async componentDidMount() {
        let res = await service.cate_nav()
        console.log(res.data.list);
        this.setState({ catenav: res.data.list })
    }
    render() {
        return (
            <div className='cate'>
                <div className="cateheader">
                    <div className="title">
                        演出
                    </div>
                    <div className="search">
                        <SearchOutline />
                    </div>
                </div>
                <Tabs
                    activeLineMode='fixed'
                    style={{
                        '--fixed-active-line-width': '5px',
                        '--active-line-height': '5px',
                        '--active-line-border-radius': '50%',
                        '--active-line-color': 'red',
                        '--active-title-color': 'red',
                        '--title-font-size': '14px',
                    }}
                >
                    {
                        this.state.catenav.map(item => {
                            return (
                                <Tabs.Tab title={item.name} key={item.id}>

                                </Tabs.Tab>
                            )
                        })
                    }
                </Tabs>
                <div className="allshowlist">
                    <AllShow></AllShow>
                </div>
            </div>
        );
    }
}

export default Cate;